<script setup>
import {ref} from 'vue'
    const imgList=[
      'https://oss-img.ojbkcdn.com/tutuji/20240324/dmhjzl2klua.jpg',
      'https://oss-img.ojbkcdn.com/tutuji/20240324/tvs5x5gz3jr.jpg',
      'https://oss-img.ojbkcdn.com/tutuji/20240324/5byvaujqdz3.jpg',
      'https://oss-img.ojbkcdn.com/tutuji/20240324/fzavgp34adu.jpg',
      'https://oss-img.ojbkcdn.com/tutuji/20240324/mosoolryyh5.jpg',
      'https://oss-img.ojbkcdn.com/tutuji/20240324/r1wn54f23mn.jpg',
      'https://oss-img.ojbkcdn.com/tutuji/20240324/0zn4h4xqkwu.jpg'
    ]
    const index=ref(0)

</script>
<template>
<div>
  <div>
    <button v-on:click="index--" v-show="index>=1">上一页</button>
  </div>
  <img :src="imgList[index]" alt="img"/>
  <div>
    <button v-on:click="index++" v-if="index<imgList.length-1">下一页</button>
  </div>

</div>
</template>



<style >
#app{
  display: flex;
  width: 500px;
  height: 350px;
}
img{
  width: 240px;
  height: 350px;
}
#app div{
  /* 这是这是 flex-grow: 1、flex-shrink: 1、flex-basis: 0 的简写  
  平均分配剩余空间（flex-grow: 1），即所有 div 宽度 / 高度相等。
  允许收缩（flex-shrink: 1），防止溢出容器。
  初始大小为 0（flex-basis: 0），完全由剩余空间决定尺寸。 */
  flex: 1;  
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>